<template>
  <div class="m-app-header clearfix">
    <h1 class="brand fl"></h1>
    <ul class="fl nav">
      <router-link tag="li" to="/" @click.native="onPushHome">首页</router-link>
    </ul>
    <ul class="person fr">
      <li @click="login">您好，{{this.$store.getters.userName}}</li>
      <li class="exit" @click="onExit">[ 退出 ]</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    },
    methods: {
      onPushHome() {
        if (this.$store.getters.aBreads.length === 0) return
        this.$store.commit('resetBreads', [{ name: '首页' }])
      },
      onExit() {
        // 清空用户信息
        this.$store.commit('clearUserInfo')
        this.$router.push('/login')
      },

      /**
       * 点击去登录
       */
      login() {
        // 如果当前token存在，则不跳登录页面
        if (this.$store.getters.token) {
          return
        }

        // 如果token不存在，则调到登录页面
        this.onExit()
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .base-h {
    height: 54px;
    line-height: 54px;
    color: $color-white;
  }
  .m-app-header {
    height: 54px;
    padding: 0 30px;
    background: #000;
    .brand {
      @extend .base-h;
      background: url('../../assets/logo.png');
      width: 200px;
      font-size: 20px;
      margin-top: -1px;
    }
    .nav {
      li {
        @extend .base-h;
        float: left;
        font-size: 20px;
        cursor: pointer;
      }
    }
    .person {
      li {
        @extend .base-h;
        float: left;
        font-size: 16px;
        &.exit {
          margin-left: 40px;
          color: $color-main;
          cursor: pointer;
        }
      }
    }
  }
</style>